<template>
  <div class="wrap">
    <CHeader content="企业三同时管理" ref="head"/>
    <div class="box">
      <div
        class="bodyContainer"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="bodyTop">
          <el-form ref="form" :model="filter" inline>
            <!-- medium / small / mini -->
            <el-form-item size="small">
              <Select2el
                v-model="filter.region"
                placeholder="县区选择"
                filterable
              >
                <el-option
                  v-for="item in regionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </Select2el>
            </el-form-item>
            <el-form-item size="small">
              <Select2el
                v-model="filter.projectType"
                placeholder="项目类型选择"
                filterable
              >
                <el-option
                  v-for="item in projectTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </Select2el>
            </el-form-item>
            <el-form-item size="small">
              <Select2el
                v-model="filter.approvalStatus"
                placeholder="审批进度选择"
                filterable
              >
                <el-option
                  v-for="item in approvalStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </Select2el>
            </el-form-item>
            <el-form-item size="small" label="企业名称：">
              <el-input
                v-model="filter.companyName"
                placeholder="请输入企业名称"
                clearable
              />
            </el-form-item>
            <el-form-item size="small" label="项目名称：">
              <el-input
                v-model="filter.projectName"
                placeholder="请输入项目名称"
                clearable
              />
            </el-form-item>
            <el-form-item size="small">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click.stop="onSubmit"
                style="
                  background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
                  box-shadow: 0px 2px 4px 0px rgba(81, 133, 235, 0.5);
                  border-radius: 4px;
                "
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="tableContainer">
          <div class="tableTool">
            <div class="total">
              合计：<span>{{ pageOption.total }}</span>
            </div>
            <el-button type="primary" @click.stop="exportExcel">导出</el-button>
          </div>
          <CardTable
            :showHeader="false"
            :data="tableData"
            :pageOption.sync="pageOption"
            @sizeChange="sizeChange"
            @currentChange="currentChange"
            :height="maxHeight"
          >
          <el-table-column
            prop="number"
            label="序号"
            align="center"
            width="90">
          </el-table-column>
          <el-table-column
            prop="type"
            label="项目类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="项目名称">
          </el-table-column>
          <el-table-column
            prop="process"
            label="项目审批进度">
          </el-table-column>
          </CardTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import CardTable from "@/components/cardTable/cardTable";
import Select2el from "@/components/select2el/select2el";
import * as browser from "@/utils/browser";
const {IEVersion,resizeObserver} = browser.default;
/**
 * 注：el-date-picker 在当前项目中使用的是 element-ui 的 2.15.2 版本会有警告，不影响正常功能
 * Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
 */
export default {
  name: "bggl",
  components: {
    CHeader,
    CardTable,
    Select2el,
  },
  data() {
    return {
      loading: true,
      maxHeight: '100%',
      regionArray: [
        // 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "盐化新区", label: "yxxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" },
      ],
      // 项目类型
      projectTypeOptions: [
        // 安全 消防
        { label: "安全", value: "aq" },
        { label: "消防", value: "xf" },
      ],
      approvalStatusOptions: [
        // 验收 设计审核 试生产 实施审核 审批完成
        { label: "验收", value: "ys" },
        { label: "设计审核", value: "sjs" },
        { label: "试生产", value: "ssc" },
        { label: "实施审核", value: "sss" },
        { label: "审批完成", value: "spwc" },
      ],
      // 过滤器
      filter: {
        // 区域
        region: "",
        companyName: "",
        projectName: "",
        // 项目类型
        projectType: "",
        // 项目审批进度
        approvalStatus: "",
      },
      pageOption: {
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, total, prev, pager, next, jumper",
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      result: {},
      tableData: [],
      value: "",
    };
  },
  computed: {
    regionOptions() {
      return this.regionArray.map((item) => {
        return {
          value: item.label,
          label: item.name,
        };
      });
    },
  },
  methods: {
    setHeight(){
      this.$el && this.$nextTick(() => {
        let mainHeight =  window.innerHeight - document.querySelector('.header-container').offsetHeight,
          header = this.$refs.head ? this.$refs.head.$el : null,
          bodyTop = this.$el.querySelector('.bodyTop'),
          tableTool = this.$el.querySelector('.tableTool'),
          paddingTop = 20,
          height = mainHeight - paddingTop;
        if(header){
          height -= header.offsetHeight;
        }
        if(bodyTop){
          height -= bodyTop.offsetHeight ;
        }
        if(tableTool){
          height -= tableTool.offsetHeight;
        }
        this.maxHeight = height + 'px';
      })
    },
    exportExcel(){
      this.$message.info('暂未开放');
    },
    onSubmit() {
      /**
       * 查询的时候重置页码
       * this.filter 为查询条件
       * this.pageOption 为分页条件
       * this.tableData 为表格数据
       * this.pageOption.currentPage 当前页码
       * this.pageOption.total 为总条数
       */
      console.log(this.filter, this.pageOption);
    },
    initFilter() {
      Object.keys(this.filter).forEach((key) => {
        if (this.$route.query[key]) {
          this.filter[key] = this.$route.query[key];
        }
      });
    },
    init() {
      this.loading = true;
      setTimeout(() => {
        this.getTableData(true);
        this.loading = false;
      }, 1000);
    },
    getTableData(retry = false) {
      this.tableData = [];
      setTimeout(() => {
        let i =
          this.pageOption.currentPage == 1
            ? 1
            : 1 + this.pageOption.pageSize * (this.pageOption.currentPage - 1);
        this.tableData = [];
        if (retry) {
          this.pageOption.currentPage = 1;
          this.pageOption.total = Math.floor(Math.random() * 1000);
        }
        let tempCount = this.pageOption.pageSize - this.tableData.length;
        for (let index = this.tableData.length; index < tempCount; index++) {
          let item = {
            number: i++,
            type: "安全",
            name: "20万吨/年环氧乙烷、6万吨/年食品级二氧化碳回收及配套工程项目",
            process: "验收"
          };
          this.tableData.push(item);
        }
      }, 1000);
    },
    sizeChange(val) {
      this.pageOption.pageSize = val;
      this.getTableData();
    },
    currentChange(val) {
      this.pageOption.currentPage = val;
      this.getTableData();
    },
  },
  mounted() {
    Object.keys(this.$route.query).length > 0 && this.initFilter();
    this.init();
    if(IEVersion() == -1){
      resizeObserver(this.$el,()=>{
        this.setHeight();
      },this.resizeMain);
    }
  },
  destroyed(){
    if(IEVersion() == -1){
      this.resizeMain && this.resizeMain.disconnect();
    }
  }
};
</script>

<style scoped lang="scss">
.wrap {
  width: 100%;
  min-height: 100%;
  text-align: left;
  background-color: rgb(243, 245, 251);
  .header_wrap {
    background-color: #fff;
    border-bottom: 1px solid #e0eaf5;
  }
  .box {
    padding: 20px 0 0;
    max-width: 100%;
    .el-radio-group {
      padding: 0 20px;
    }
    :deep .el-radio-button {
      .el-radio-button__inner {
        max-height: 36px;
        padding: 6px 20px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
      }
      &.is-active .el-radio-button__inner {
        background-color: #5184ea;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          border-top: 5px solid #5184ea;
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-right: 5px solid transparent;
        }
      }
    }
    .bodyContainer {
      min-height: 30vh;
      background: #fdffff;
      .bodyTop {
        padding: 0 32px;
        height: 74px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e0eaf5;
        .el-form-item {
          margin-bottom: 0;
          .el-form-item__label {
            font-size: 16px;
            font-weight: 400;
            color: #333;
          }
          .el-form-item__content {
            width: 220px;
            font-size: 16px;
            font-weight: 400;
            color: #333;
            /*对齐方式为居中*/
            vertical-align: middle;
          }
        }
      }
      .tableTool {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
      }
      .tableContainer {
        padding: 0 32px;
      }
    }

    :deep .bodyContainer {
      .bodyTop {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              vertical-align: middle;
            }
          }
        }
      }
      .el-table__header-wrapper {
        max-height: 46px;
        thead .el-table__cell {
          max-height: 22px;
          line-height: 22px;
          background: #f0f4f9;
        }
      }
      .tableTool .el-button--primary {
        width: 82px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
        box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
        border-radius: 4px;
        padding: 0 20px;
      }
    }
  }
}
.flex {
  display: flex;
}
.center {
  justify-content: center;
  align-items: center;
}
.flex {
  > * {
    vertical-align: middle;
  }
  span {
    margin: 0 4px;
  }
  .tips {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-decoration: underline;
    color: #4d7ee9;
  }
  i {
    color: #4d7ee9;
  }
}
.red {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f83a3a;
}
:deep .el-table th {
  box-sizing: border-box;
  color: #5d6c8e;
  background-color: #f0f4f9;
  padding: 0;
}
:deep .el-table td {
  padding: 7px 5px;
}
</style>